<template>
    <div class="wrapper">
        <div class="header">
            <el-row style="margin-bottom:20px">
                <el-button type="danger" style="width:120px" @click="centerDialogVisible=true;title='新增'">新建</el-button>
            </el-row>
            <el-form label-position="right" label-width="80px">
             <el-row>
                <el-col :span="4" >
                     <el-form-item label="任务名称" >
                        <el-input v-model="searchBo.name" placeholder="请输入任务名称"></el-input>
                    </el-form-item>
                
                </el-col>
               <el-col :span="4" >
                     <el-form-item label="任务编号" >
                        <el-input v-model="searchBo.id" placeholder="请输入任务编号"></el-input>
                    </el-form-item>
                
                </el-col>
                <el-col :span="4" >
                     <el-form-item label="采集类型" >
                        <el-select clearable v-model="searchBo.taskType" placeholder="请选择采集类型">
                            <el-option
                            label="采集粉丝"
                            value="1">
                            </el-option>
                             <el-option
                            label="采集评论"
                            value="2">
                            </el-option>
                             <el-option
                            label="采集直播间"
                            value="3">
                            </el-option>
                        </el-select>
                    </el-form-item>
                
                </el-col>
                <el-col :span="4" >
                     <el-form-item label="内容分类" >
                        <el-select clearable v-model="searchBo.contentType" placeholder="请选择采集内容类型">
                            <el-option
                            v-for="item in contentList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                
                </el-col>
                <el-col :span="4" style="margin-right:30px">
                     <el-form-item label="任务状态" >
                         <el-select clearable v-model="searchBo.status" placeholder="请选择任务状态">
                            <el-option
                            label="待审核"
                            value="1">
                            </el-option>
                             <el-option
                            label="驳回"
                            value="2">
                            </el-option>
                             <el-option
                            label="审核通过"
                            value="3">
                            </el-option>
                             <el-option
                            label="执行中"
                            value="10">
                            </el-option>
                             <el-option
                            label="暂停"
                            value="11">
                            </el-option>
                             <el-option
                            label="采集终止"
                            value="12">
                            </el-option>
                             <el-option
                            label="采集完成"
                            value="13">
                            </el-option>
                        </el-select>
                    
                    </el-form-item>
                
                </el-col>
                 <el-button type="danger" style="width:120px" @click="getList">查询</el-button>
            </el-row>
            </el-form>
        </div>
        <div class="body">
            <Table  :list="list" 
                    :state="false" 
                    v-loading="loading" 
                    :total="total" 
                    @currentChange="currentChange"
                    @sizeChange="handSize">
               
               <slot>
                     <el-table-column label="操作" align="center" width="240px">
                        <template slot-scope="scope">
                            <el-row style="margin-bottom:5px">
                                 <el-button
                                size="mini"
                                type="success"
                                @click="showDetails(scope.row)">详情
                            </el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                :disabled="scope.row.status !=1"
                                @click="handleEdit(scope.row)">修改
                            </el-button>
                            <el-button
                                size="mini"
                                type="info"
                                :disabled="scope.row.status !=1"
                                @click="handleDel(scope.row)">删除
                            </el-button>
                            </el-row>
                            <el-row>
                                <el-button
                                    size="mini"
                                    type="danger"
                                     v-if="scope.row.status == 1"
                                    @click="handleClick(scope.row,'审核通过')">审批通过
                                </el-button>
                                 <el-button
                                    size="mini"
                                    type="danger"
                                     v-if="scope.row.status == 2"
                                    @click="handleClick(scope.row,'待审核')">待审核
                                </el-button>
                                <el-button
                                    size="mini"
                                    type="primary"
                                     v-if="scope.row.status == 1"
                                    @click="handleClick(scope.row,'驳回')">审核驳回
                                </el-button>
                                 <el-button
                                    v-if="scope.row.status == 10"
                                    size="mini"
                                    type="primary"
                                    @click="handleClick(scope.row,'暂停')">暂停
                                </el-button>
                                 <el-button
                                   v-if="scope.row.status == 10 || scope.row.status == 11"
                                    size="mini"
                                    type="danger"
                                    @click="handleClick(scope.row,'采集终止')">终止
                                </el-button>
                                <el-button
                                   v-if="scope.row.status == 3 || scope.row.status == 11"
                                    size="mini"
                                    type="primary"
                                    @click="handleClick(scope.row,'执行中')">执行
                                </el-button>
                            </el-row>
                           
                           
                           
                        </template>
                    </el-table-column>
                </slot>
            </Table>
        </div>
        <el-dialog
            :title="title"
            :visible.sync="centerDialogVisible"
             :before-close="onCancel"
            width="40%"
            >
            <div>
                <el-form ref="addForm" :model="addForm" :rules="rule" label-position="right" label-width="140px">
                    <el-form-item label="任务名称" prop='name'>
                        <el-input v-model="addForm.name" placeholder="请输入任务名称"></el-input>
                    </el-form-item>
                    <el-form-item label="执行采集器" prop='collectorId'>
                        <el-select clearable v-model="addForm.collectorId" placeholder="请选择执行采集器">
                            <el-option
                            v-for="item in InfoList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                        <!-- <el-input v-model="addForm.value" placeholder="请选择执行采集器"></el-input> -->
                    </el-form-item>
                    <el-form-item label="采集类型" prop='taskType'>
                         <el-radio-group v-model="addForm.taskType">
                            <el-radio :label="1">采集粉丝</el-radio>
                            <el-radio :label="2">采集评论</el-radio>
                            <el-radio :label="3">采集直播间</el-radio>
                        </el-radio-group>
                       
                    </el-form-item>
                    <el-form-item label="内容类型" prop='contentType'>
                         <el-select clearable v-model="addForm.contentType" placeholder="请选择采集内容类型">
                            <el-option
                            v-for="item in contentList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                        <!-- <el-input v-model="addForm.contentType" placeholder="请选择采集内容类型"></el-input> -->
                    </el-form-item>
                    <el-form-item label="用户首页" prop='homeUrl'>
                        <el-input v-model="addForm.homeUrl" placeholder="请输入用户首页"></el-input>
                    </el-form-item>
                    <el-form-item label="作品地址" prop='opusUrl' v-if="addForm.taskType == 2">
                        <el-input v-model="addForm.opusUrl" placeholder="请输入作品地址"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="onCancel">取 消</el-button>
                <el-button type="primary" @click="onOk">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="详情"
            :visible.sync="details"
            width="40%"
        >
            <el-row style="padding:0 20px">
                <!-- <h4 style="padding-bottom:10px;border-bottom:1px solid #ccc;margin-bottom:20px">详细情况</h4> -->
                <el-col :span="12" v-for="(item,index) in detailsInfo" :key="index" style="margin-bottom:20px" v-if="d[index]">
                    <!-- {{index}} -->
                    <span v-if='index == "collectTotal"'>
                        
                         {{d[index]}}:{{detailsInfo['collectCount'] +'/' +detailsInfo[index]}}
                    </span>
                    <span v-else-if='index == "status"'>
                        {{d[index]}}:{{showHtml(detailsInfo[index])}}
                         
                    </span>
                    <span v-else-if='index == "taskType"'>
                        {{d[index]}}:{{showtaskType(detailsInfo[index])}}
                         
                    </span>
                     <span v-else>
                        {{d[index]}}:{{detailsInfo[index]}}
                         
                    </span>
                   
                </el-col>
            </el-row>

        </el-dialog>

    </div>
</template>

<script>
import {collectorTaskList,collectorTaskAdd,
collectorTaskEdit,collectorTaskDel,
collectorInfoList,collectorContentList,
collectorCheck
} from '../../../api/collector'
import Socket from '../../../utils/socket'
import Table from '@/components/Table'
import { getToken } from '../../../utils/auth'
export default {
    components:{
        Table
    },
    data () {
        return {
            list:{
                thead:[
                    // {label:'编号',prop:"index",rowspan:1},
                    {label:'任务编号',prop:"id",rowspan:1},
                    {label:'任务名称',prop:"name",rowspan:1},
                    {label:'采集器编号',prop:"collectorId",rowspan:1},
                    {label:'采集类型',prop:"taskType",rowspan:1,formatter:(row)=>{
                        switch (row.taskType) {
                            case 1:
                                return '采集粉丝'
                            case 2:
                                return '采集评论'
                            case 3:
                                return '采集直播间'
                        }
                    }},
                    {label:'内容分类',prop:"contentName",rowspan:1},
                    {label:'采集情况（已采集/采集总量）',prop:"contentName",width:230,rowspan:1,formatter:(row,col,text)=>{
                        return row.collectCount +"/"+row.collectTotal
                    }},
                    {label:'任务状态',prop:"status",rowspan:1,formatter:(row,columns,text)=>{
                       
                            switch (row.status) {
                                case 1:
                                    return '待审核';
                                case 2:
                                    return '驳回';
                                case 3:
                                    return '审核通过';
                                case 10:
                                    return '执行中';
                                case 11:
                                    return '暂停';
                                case 12:
                                    return '采集终止';
                                case 13:
                                    return '采集完成'; 
                                default:
                                    return '';    
                            }
                    }},
                ],
                tbody:[]
            },
            searchBo:{
                name:'',
            },
            loading:false,
            total:0,
            title:'新增',
            centerDialogVisible:false,
            addForm:{
                collectorId: "",
                contentType: '',
                homeUrl: "",
                name: "",
                remark: "",
                taskType: '',
                value: "",
            },
            rule:{
                name:[  { required: true, message: '请输入指令簇名称', trigger: 'blur' },],
                value:[  { required: true, message: '请输入指令簇编码', trigger: 'blur' },],
                remark:[  { required: true, message: '请输入备注', trigger: 'blur' },]
            },
            pageSize:20,
            pageNum:1,
            total:0,
            instructionClusterId:'',
            InfoList:[],
            contentList:[],
            details:false,
            d:{
                'id':'任务编号',
                'name':'任务名称',
                'collectorId':'采集器编号',
                'taskType':'采集类型',
                'contentName':'内容类型',
                'collectTotal':'采取情况',
                'status':'任务状态',
                'homeUrl':'用户首页',
                'opusUrl':'作品地址',
                'remark':'备注',

                
            },
            detailsInfo:{},
            statusList:{
                "待审核":1,
                "驳回":2,
                "审核通过":3,
                "执行中":10,
                "暂停":11,
                "采集终止":12, 
                "采集完成":13
            }

        }
        
    },
    mounted () {
        this.getList();
        this.socket = new Socket({url:'ws://dev-ws.sqcat.cn/collector-client/'+getToken(),callback:this.onMessage});
        collectorInfoList({
            pageNum:1,
            pageSize:0
        }).then(res=>{
            if(res.status =='200'){
                this.InfoList = [...res.data.list]
            }
        })
        collectorContentList({
            pageNum:1,
            pageSize:0
        }).then(res=>{
            if(res.status =='200'){
                this.contentList = [...res.data.list]
            }
        })
    },
    destroyed () {
        this.socket.close()
    },
    methods:{
        showHtml (row) {
            switch (row) {
                case 1:
                    return '待审核';
                case 2:
                    return '驳回';
                case 3:
                    return '审核通过';
                case 10:
                    return '执行中';
                case 11:
                    return '暂停';
                case 12:
                    return '采集终止';
                case 13:
                    return '采集完成'; 
                default:
                    return '';    
            }
        },
        showtaskType (row){
            switch (row) {
                case 1:
                    return '采集粉丝';
                case 2:
                    return '采集评论';
                case 3:
                    return '采集直播间';
        
                    return '';    
            }
        },
        onMessage (data) {
            this.getList()
        },
        onOk () {
            this.$refs['addForm'].validate((vaild)=>{
                if(vaild) {
                    if(this.title == '新增'){
                        collectorTaskAdd(this.addForm).then(res=>{
                            if(res.status == 200) {
                                this.$message({
                                    type:'success',
                                    message:"新增成功！"
                                })
                                this.getList()
                                this.onCancel()
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                    }else{
                         collectorTaskEdit(this.addForm).then(res=>{
                            if(res.status == 200) {
                                this.$message({
                                    type:'success',
                                    message:"修改成功！"
                                })
                                this.getList()
                                this.onCancel()
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }
            })
           
        },

        onCancel () {
            this.centerDialogVisible = false;
            this.addForm=this.$options.data().addForm
            this.$refs['addForm'].clearValidate();
            this.$refs['addForm'].resetFields();
        },
        getList () {
            this.loading = true;
            let obj = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                ...this.searchBo
            }
            collectorTaskList(obj).then(res=>{
                if(res.status == 200) {
                    this.total = res.data.total;
                    this.list.tbody = res.data.list;
                }else{
                                this.$message.error(res.msg)
                            }
            }).finally(res=>{
                this.loading =false;
            })
        },
        handSize (val) {
            this.pageNum =val;
            this.getList()
        },
        currentChange (val) {
            this.pageSize = val;
            this.getList();
        },
        handleEdit (row) {
            this.title = '修改'
            this.addForm = {...row};
            this.centerDialogVisible = true;
        },
        handleDel (row) {
            console.log(row)
             this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    collectorTaskDel(row).then(res=>{
                        if(res.data) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getList()
                        }else{
                            this.$message({
                                type:'error',
                                message:res.msg
                            })
                        }
                    })
                    
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        handleClick (rows,type){
            collectorCheck(rows,this.statusList[type]).then(res=>{
                if(res.status == '200'){
                    this.$message({
                        type:'success',
                        message:'操作成功！'
                    });
                    this.getList()
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        showDetails (row){
            this.details = true;
            this.detailsInfo = row;
        }
    }
}
</script>

<style lang="less" scoped>
    .wrapper{
        width: 100%;
        overflow: auto;
        .header{
            height: 190px;
            margin-bottom: 25px;
            background-color: #fff;
            padding:38px 20px;
            box-sizing: border-box;;
        }
        .body{
            width: 100%;
            padding: 10px 20px;
                  box-sizing: border-box;
            height:500px ;
            overflow: auto;
            background-color: #fff;
        }
        

    }
</style>